
<template>
  <div class="mod-crm__crmexhiproject">
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>展会项目列表</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
        <!--新增 -->
      <el-form-item style="margin-top:15px">
        <el-button v-if="state.hasPermission('crm:crmexhiproject:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-table
        :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
          v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
          <el-table-column  type="selection" align="center"></el-table-column>
          <el-table-column   align="center"  prop="exhId" label="展会ID"  width="180"></el-table-column>
          <el-table-column   align="center"  prop="name" label="展会项目名称"></el-table-column>
          <el-table-column   align="center"  prop="creator" label="创建人"  width="200"></el-table-column>
          <el-table-column   align="center"  prop="remark" label="展会项目备注"  width="200"></el-table-column>
          <el-table-column   align="center"  prop="createTime"  label="创建时间"></el-table-column>
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" >
            <template v-slot="scope">
              <el-button v-if="state.hasPermission('crm:crmexhiproject:update')"  link type="primary"  @click="addOrUpdateHandle(scope.row.id)">{{ $t("编辑") }}</el-button>
              <el-button v-if="state.hasPermission('crm:crmexhiproject:delete')"  link type="danger"  @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
  </template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./exhibition-project-add-or-update.vue";
const view = reactive({
  getDataListURL:'/crm/crmexhiproject/page',
  getDataListIsPage: true,
  deleteURL: "/crm/crmexhiproject",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    name: "",
    source: "",
    state: "",
    input:"",
    value1:"",
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
</script>